(function($) {
  var prefs = new gadgets.Prefs();
  var key = prefs.getString('apikey');
  var filter = prefs.getString('filter');
  var diagramId;
  var diagrams;
  var diagrams_bak;
  var diagramsCount;
  var diagramsPage;
  var diagramsLimit = prefs.getInt('limit');
  var folders;

  function escape(s) {
    return (s == null || s.length == 0) ? s : s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\n/g, "<br>");
  }

  function showDate(d) {
    return d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ":" + d.getSeconds();
  }

  function call(url, callback) {
    var params = {}
    params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
    params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET;
    makeCachedRequest(url, callback, params, 60);
  }

  function makeCachedRequest(url, callback, params, refreshInterval) {
    var ts = new Date().getTime();
    var sep = "?";
    if (refreshInterval && refreshInterval > 0) {
      ts = Math.floor(ts / (refreshInterval * 1000));
    }
    if (url.indexOf("?") > -1) {
      sep = "&";
    }
    url = [url, sep, "nocache=", ts].join("");
    gadgets.io.makeRequest(url, callback, params);
  }

  function resize() {
    if (gadgets.window) gadgets.window.adjustHeight();
  }

  function getDiagrams() {
    call('https://cacoo.com/api/v1/diagrams.json?apiKey=' + key, showDiagrams);
  }

  function showDiagrams(response) {
    diagrams_bak = response.data;
    if (diagrams_bak != null) {
      execFilter();
      writeDiagrams();
    } else {
      $('#main').html(prefs.getMsg('geterror'));
    }
    resize();
  }

  function writeDiagrams() {
    var i;
    var s = '';
    var ms = '';
    if (diagramsCount == 0) {
      ms = '<img src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/left_off.png"> <img src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/right_off.png">';
      s = prefs.getMsg('nodiagram');
      $('#main').html(s);
      $('#menu_left').html(ms);
    } else {
      if (isPrev()) {
        ms += '<a id="prev" href="javascript:void(0)"><img src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/left_on.png"></a>';
      } else {
        ms += '<img src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/left_off.png">';
      }
      ms += ' ';
      if (isNext()) {
        ms += '<a id="next" href="javascript:void(0)"><img src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/right_on.png"></a>';
      } else {
        ms += '<img src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/right_off.png">';
      }
      var first = getFirstCount();
      var last = getLastCount();
      s += '<div id="count">' + diagramsPage + '/' + getAllPageCount() + '</div>';
      for(i = first - 1; i < last; i++) {
        var o = diagrams.result[i];
        var securityStr = '';
        if (o.security == 'private') {
          securityStr = '<img src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/security.png" title="' + prefs.getMsg('private') + '">';
        }
        var folderStr = '';
        if(o.folderId != null) {
          folderStr = '<a href="https://cacoo.com/diagrams/?conditionType=MY_FOLDER&myFolderId=' + o.folderId + '" target="_blank">' + escape(o.folderName) + '</a><br>';
        }
        var editStr = ''
        if (o.editing == true) {
          editStr = '<img src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/active.png" title="' + prefs.getMsg('editing') + '">';
        } else {
          editStr = '<img src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/offline.png" title="' + showDate(new Date(o.updated)) + '">';
        }
        var imgSize = 72;
        var sheetsStr = '';
        var infoWidth = '';
        if (gadgets.views && gadgets.views.getCurrentView().getName() == 'canvas') {
          imgSize = 128;
          sheetsStr = '<td class="sheets_info"><div id="' + o.diagramId + '_sheets" class="sheets"></div></td>';
          infoWidth = ' width="200px"';
        }
        s += '<div id="' + o.diagramId + '" class="diagram"><table class="diagram_table" width="100%"><tr><td align="center" valign="middle" width="' + (imgSize + 4) + '" height="' + imgSize + '"><a href="' + o.url + '" target="_blank"><img src="' + o.imageUrlForApi + '?apiKey=' + key + '&width=' + imgSize + '&height=' + imgSize + '" title="' + escape(o.title) + '" style="flort: left;"></a></td><td class="diagram_info"' + infoWidth + '"><a href="' + o.url + '" target="_blank" title="' + escape(o.description) + '">' + escape(o.title) + '</a>' + editStr + securityStr + '<br>' + escape(o.owner.nickname) + '<br>' + folderStr + '<span class="command"><img src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/comment.png" class="link comments" diagramid="' + o.diagramId + '" title="' + prefs.getMsg('showcomment') + '"><img src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/chat.png" class="link chat" diagramid="' + o.diagramId + '" title="' + prefs.getMsg('showchat') + '"><a href="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/viewer.html#' + o.diagramId + '" + target="CacooViewer"><img src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/viewer.png" title="' + prefs.getMsg('showviewer') + '"></a><a href="https://cacoo.com/diagrams/' + o.diagramId + '/edit" + target="_blank"><img src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/edit.png" title="' + prefs.getMsg('edit') + '"></a></span><br>' + '</td>' + sheetsStr + '</tr></table><div id="' + o.diagramId + '_comments" class="comments"></div></div>';
      }
      $('#main').html(s);
      $('#menu_left').html(ms);
      if (gadgets.views && gadgets.views.getCurrentView().getName() == 'canvas') {
        for(i = first - 1; i < last; i++) {
          var o = diagrams.result[i];
          getSheets(o.diagramId);
        }
      }
    }
  }

  function getFirstCount() {
    return (((diagramsPage - 1) * diagramsLimit) + 1);
  }

  function getLastCount() {
    var c = diagramsPage * diagramsLimit;
    if (c > diagramsCount) {
      c = diagramsCount;
    }
    return c;
  }

  function getAllPageCount() {
    return Math.ceil(diagramsCount / diagramsLimit);
  }

  function isNext() {
    var c = diagramsPage * diagramsLimit;
    if (c < diagramsCount) {
      return true;
    }
    return false;
  }

  function isPrev() {
    if (diagramsPage > 1) {
      return true;
    }
    return false;
  }

  function execFilter() {
    if (filter == null || filter == '') {
      diagrams = diagrams_bak;
    } else {
      var bak_count = diagrams_bak.result.length;
      var a = new Array();
      var i;
      if (filter == 'editing') {
        for (i = 0; i < bak_count; i++) {
          var o = diagrams_bak.result[i];
          if (o.editing == true) {
            a.push(o);
          }
        }
      } else if (filter == 'owner') {
        for (i = 0; i < bak_count; i++) {
          var o = diagrams_bak.result[i];
          if (o.own) {
            a.push(o);
          }
        }
      } else if (filter == 'shared') {
        for (i = 0; i < bak_count; i++) {
          var o = diagrams_bak.result[i];
          if (!o.own) {
            a.push(o);
          }
        }
      } else if (filter.indexOf('folder_') == 0) {
        var name = filter.substring(7);
        for (i = 0; i < bak_count; i++) {
          var o = diagrams_bak.result[i];
          if (o.folderId == name) {
            a.push(o);
          }
        }
      }
      diagrams = new Array();
      diagrams['result'] = a;
    }
    diagramsCount = diagrams.result.length;
    diagramsPage = 1;
  }

  function writeSelecter() {
    var s = '<form action="javascript:void(0);"><select id="filter" name="filter">';
    s += '<option value=""></option>';
    s += '<option value="owner">' + prefs.getMsg('owner') + '</option>';
    s += '<option value="shared">' + prefs.getMsg('shared') + '</option>';
    s += '<option value="editing">' + prefs.getMsg('editing') + '</option>';
    var i;
    var count = folders.result.length;
    for (i = 0; i < count; i++) {
      var o = folders.result[i];
      s += '<option value="folder_' + o.folderId + '">' + o.folderName + '</option>';
    }
    s += '</select></form>';
    $('#menu_left2').html(s);
    $('#filter').val(filter).change(function(){
      filter = $(this).val();
      prefs.set('filter', filter);
      execFilter();
      writeDiagrams();
      resize();
    });
  }

  function getSheets(diagramId) {
    call('https://cacoo.com/api/v1/diagrams/' + diagramId + '.json?apiKey=' + key, showSheets);
  }

  function showSheets(response) {
    var json = response.data;
    if (json != null) {
      var sheets = json.sheets;
      var count = sheets.length;
      var i;
      var s = '';
      for(i = 0; i < count; i++) {
        var o = sheets[i];
        s += '<div class="sheet"><a class="getpng" href="https://cacoo.com/diagrams/' + json.diagramId + '-' + o.uid + '/export?format=png" title="' + prefs.getMsg('getpng') + '" target="_blank"><img src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/png.png"></a><a href="' + o.url + '" target="_blank"><img class="sheet_img" src="' + o.imageUrlForApi + '?apiKey=' + key + '" title="' + escape(o.name) + '" width="72" height="72"></a></div>';
      }
      $('#' + json.diagramId + '_sheets').html(s);
      $('img.sheet_img').tooltip({ 
        delay: 0,
        showURL: false,
        bodyHandler: function() { 
          return $('<img/>').attr('src', this.src).addClass('overlay_img'); 
        } 
      });
    } else {
    }
    resize();
  }

  function getFolders() {
    call('https://cacoo.com/api/v1/folders.json?apiKey=' + key, function(res){folders = res.data; writeSelecter();});
  }

  function getComments(diagramId) {
    call('https://cacoo.com/api/v1/diagrams/' + diagramId + '.json?apiKey=' + key, showComments);
  }

  function showComments(response) {
    var json = response.data;
    if (json != null) {
      var comments = json.comments;
      var count = comments.length;
      var i;
      var s = '<img class="link close" title="' + prefs.getMsg('close') + '" src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/comment.png"><br clear="all">';
      if (count == 0) {
        s += prefs.getMsg('nocomment');
      }
      for(i = 0; i < count; i++) {
        var o = comments[i];
        s += '<div class="user_icon"><img src="' + o.user.imageUrl + '" title="' + escape(o.user.nickname) + '"></div><div class="comment">' + escape(o.user.nickname) + '<br>' + escape(o.content) + '</div>';
      }
      $('#' + diagramId + '_comments').html(s);
    } else {
      $('#' + diagramId + '_comments').html(prefs.getMsg('geterror'));
    }
    resize();
  }
 
  function getChat(diagramId) {
    call('https://cacoo.com/api/v1/diagrams/' + diagramId + '/chat/messages.json?apiKey=' + key, showChat);
  }

  function showChat(response) {
    var json = response.data;
    if (json != null) {
      var comments = json.result;
      var count = comments.length;
      var i;
      var s = '<img class="link close" title="' + prefs.getMsg('close') + '" src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/chat.png"><br clear="all">';
      if (count == 0) {
        s += prefs.getMsg('nochatcomment');
      }
      for(i = 0; i < count; i++) {
        var o = comments[i];
        s += '<div class="user_icon"><img src="' + o.user.imageUrl + '" title="' + escape(o.user.nickname) + '"></div><div class="comment">' + escape(o.user.nickname) + '<br>' + escape(o.content) + '</div>';
      }
      $('#' + diagramId + '_comments').html(s);
    } else {
      $('#' + diagramId + '_comments').html(prefs.getMsg('geterror'));
    }
    resize();
  }

  function setHeader() {
    $('#main').before('<div id="menu"><div id="menu_logo"><a href="https://cacoo.com/diagrams/" target="_blank" title="' + prefs.getMsg('diagrams') + '"><img src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/cacoo_icon.png"></a></div><div id="menu_left"></div><div id="menu_left2"></div><div id="menu_right"><a href="https://cacoo.com/diagrams/new" target="_blank" title="' + prefs.getMsg('new') + '"><img src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/new.png"></a> <a href="javascript:void(0);" class="link reload" title="' + prefs.getMsg('reload') + '"><img src="http://cacoo-gadget.googlecode.com/svn/tags/1.1.0/img/reload.png"></a></div></div>');
    $('#main').after('<div id="footer"><a href="http://code.google.com/p/cacoo-gadget/" target="_blank">Cacoo OpenSocial Gadget</a></div>');
    getFolders();
  }

  $(function(){
    if (key == null || key == '') {
      $('#main').html('<div class="message">' + prefs.getMsg('noapikey') + '<a href="http://cacoo.com/profile/api" target="_blank">' + prefs.getMsg('here') + '</a>' + prefs.getMsg('getapikeyinfo') + '</div><div class="register"><form action="javascript:void(0);">' + prefs.getMsg('apikeylabel') + ' <input id="apikey" type="text" name="apikey" size="24"><input type="submit" value="' + prefs.getMsg('register') + '"></form></div>');
      resize();
      $('form').submit(function(){
        key = $('#apikey').val();
        if (key == '') {
          alert(prefs.getMsg('noapikey'));
          return false;
        }
        prefs.set('apikey', key);
        setHeader();
        $('#main').html(prefs.getMsg('reloading'));
        getDiagrams();
        return false;
      });
    } else {
      setHeader();
      getDiagrams();
    }
  });

  $('a.link.reload').live('click', function() {
    $('#main').html(prefs.getMsg('reloading'));
    getDiagrams();
  });

  $('img.link.comments').live('click', function() {
    diagramId = $(this).attr('diagramid');
    $('#' + diagramId + '_comments').html(prefs.getMsg('reading'));
    resize();
    getComments(diagramId);
  });

  $('img.link.chat').live('click', function() {
    diagramId = $(this).attr('diagramid');
    $('#' + diagramId + '_comments').html(prefs.getMsg('reading'));
    resize();
    getChat(diagramId);
  });

  $('img.link.close').live('click', function() {
    $(this).parent().html('');
    resize();
  });

  $('div.diagram').live('mouseover', function() {
    $(this).addClass('select');
  }).live('mouseout', function() {
    $(this).removeClass('select');
  });

  $('a#prev').live('click', function() {
    diagramsPage--;
    writeDiagrams();
    resize();
  });

  $('a#next').live('click', function() {
    diagramsPage++;
    writeDiagrams();
    resize();
  });

})(jQuery)
